<template>
<div style="background:#fff;padding:1px 25px 20px;">
    <h3>装备建议</h3>
    <editor-vue :content="dataForm.equipAdvise" @EditorChange="getEditor" ref="infoIntroduceRef"></editor-vue>
    <h3>海钓技巧</h3>
    <editor-vue :content="dataForm.fishingSkill" @EditorChange="getEditor2" ref="infoIntroduceRef2"></editor-vue>
    <div style="margin:20px 0">
        <el-button type="primary" @click="dataFormSubmitHandle()" style="width:120px">{{
            $t("confirm")
          }}</el-button>
    </div>
</div>
</template>

<script>
import debounce from "lodash/debounce";
import editorVue from '@/components/editor'
export default {
    data() {
        return {
            dataForm: {
                equipAdvise: "",
                fishingSkill: "",
                id: '',
            }
        }
    },
    created() {
        this.getInfo();
    },

    components: {
        editorVue
    },
    methods: {
        getEditor(val) {
            this.dataForm.equipAdvise = val;
        },
        getEditor2(val) {
            this.dataForm.fishingSkill = val;
        },
        getInfo() {
            this.$http.get('/travel/fishingadvice/view').then(res => {
                console.log(res)
                if (res.data.code !== 0) {
                    return this.$message.error(res.msg);
                }
                this.dataForm = {
                    ...this.dataForm,
                    ...res.data.data,
                };
                 this.$nextTick(() => {
                    this.$refs.infoIntroduceRef.init();
                    this.$refs.infoIntroduceRef2.init();
                })
            })
        },
          // 表单提交
        dataFormSubmitHandle: debounce(
            function () {
                    this.$http[!this.dataForm.id ? "post" : "put"](
                            "/travel/fishingadvice",
                            this.dataForm
                        )
                        .then(({
                            data: res
                        }) => {
                            if (res.code !== 0) {
                                return this.$message.error(res.msg);
                            }
                            this.$message({
                                message: this.$t("prompt.success"),
                                type: "success",
                                duration: 500,
                            });
                        })
                        .catch(() => {});
            },
            1000, {
                leading: true,
                trailing: false
            }
        ),
    }
}
</script>

<style scoped>
h3 {
    margin-bottom: 0;
    margin-top: 30px
}
</style>
